<template>
	<view class="">
		<view class="pre-box">
			<view class="pre-item" v-for="(item, index) in lists" :key="index" v-if="!showUploadList">
				<image :src="item.url" mode="aspectFill" @click="PreviewImage(item,index)"></image>
				<u-icon class="del" name="close-circle-fill" size="40" color="#fa3534" @click="del(index)"></u-icon>
			</view>
			<view class="choose_area " @click="SheetShow=true">
				<view class="middle">
					<u-icon name="camera" color="#ccc" size="60"></u-icon>
					<view v-if="icontxt" class="icontxt">{{icontxt}}</view>
				</view>
			</view>
		</view>
		<u-action-sheet :list="imgSheetList" v-model="SheetShow" @click="imgSheetChoose"></u-action-sheet>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				 SheetShow: false,
				 imgSheetList: [{
				 	id:1,
				 	text: '拍照',
				 }, {
				 	id:1,
				 	text: '相册选取'
				 }, {
				 	id:2,
				 	text: '视频'
				 }, {
				 	id:2,
				 	text: '视频选取'
				 }],
				 lists: [{
				 	url: "https://cdn.uviewui.com/uview/resources/d0c76525dcf7c08f73c90fbb5f5bfe1.jpg"
				 }, {
				 	url: "https://www.uviewui.com/common/logo.png"
				 }, {
				 	url: "https://tool.zjhlone.com/3.jpg"
				 }, {
				 	url: "https://tool.zjhlone.com/3.jpg"
				 }, {
				 	url: "https://tool.zjhlone.com/3.jpg"
				 }]
			}
		},
		methods:{
			
			PreviewImage(item, index) {
				const images = this.lists.map(item => item.url || item.path);
				uni.previewImage({
					urls: images,
					current: item.url,
					success: () => {
			
					},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			},
			
			del(index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
							this.lists.splice(index, 1);
							this.$forceUpdate();
						}
					},
				})
			},
			imgSheetChoose(e){
				switch(e){
				     case 0:
				       this.chose("image")
				       break;
				   }
				
			},
			chose(e){
				uni.chooseImage({
					count: 6, 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				})
			},
			upload(){
				uni.uploadFile({
					url: 'https://jiji.soft.haoyangsoft.com/api/index/uploadImage',
					filePath: url,
					name: 'file',
					success: (res) => {
                           console.log(res)
			
					},
					fail: err => {
						reject('上传失败');
					},
					complete: res => {
				
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pre-box {
		display: flex;
	
		flex-wrap: wrap;
	}
	
	.pre-item {
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		width: 220rpx;
		height: 220rpx;
		margin-right: 20rpx;
		position: relative;
	}
	
	.choose_area {
		transition: all linear 0.2s;
		text-align: center;
		position: relative;
		margin-bottom: 40rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background: #F1F1F1;
		width: 220rpx;
		height: 220rpx;
	
	}
	
	.middle {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	
		.icontxt {
			color: #999;
		}
	}
	
	.del {
	
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 999;
	}
</style>
